<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex flex-direction align-stretch benben-position-layout flex shouye_flex_0"
				:style="{height:(120+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center justify-between shouye_fd0_0' style="padding-top: 50rpx;">
					<view class='flex flex-wrap align-center shouye_fd0_0_c0'>
						<image class="shouye_fd0_0_c0_c0"
							src="https://paiaifalv.oss-cn-beijing.aliyuncs.com/images/66.png" mode=""
							@click="pickerDiy1709006063505=true"></image>
						<text class='shouye_fd0_0_c0_c1' @click="pickerDiy1709006063505=true">{{cityname}}</text>
						<image class="qiehuan" src="https://paiaifalv.oss-cn-beijing.aliyuncs.com/images/68.png" mode=""
							@click="pickerDiy1709006063505=true"></image>
						<image class="kefu" src="https://paiaifalv.oss-cn-beijing.aliyuncs.com/images/67.png" mode=""
							@click="gokefu"></image>
					</view>
					<text class='shouye_fd0_0_c2'>案 &nbsp;&nbsp;网</text>
					<view class='flex flex-wrap align-center justify-end shouye_fd0_0_c1'>
					</view>
				</view>
				<!-- <view class='flex flex-wrap align-center shouye_fd0_1'>
					<image class='shouye_fd0_1_c0' mode="aspectFit" :src='STATIC_URL+"47.png"'></image>
					<text class='shouye_fd0_1_c1'>搜索你想要的商品</text>
				</view> -->

			</view>
			<view :style="{height: (120+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-wrap align-center justify-center benben-flex-layout shouye_flex_1" v-if="web_site_status==1">
				<view style="position: relative">
					<swiper ref="benbenSwiperfd1_0" @change="bannerIndexfd1_0 = $event.detail.current"
						class='flex position-relative shouye_fd1_0' previous-margin="0rpx" next-margin="0rpx"
						:display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>
						<swiper-item class='flex  shouye_fd1_0' v-for="item in auctionList" v-if="item.xuwei==0"
							@click="godetail(item.xuwei,item.aid)">
							<view class="swipen_one">
								<view class="swipen_one_l">
									<image :src="item.head" mode="aspectFill"></image>
								</view>
								<view class="swipen_one_r">
									<view class="swipen_one_r_one">
										<text class="swipen_one_r_one_name">{{item.realname}}</text>
										<text class="swipen_one_r_one_bq">{{item.zhiwu}}</text>
									</view>
									<view class="swipen_one_r_number">
										<text>{{item.mobile}}</text>
									</view>
									<view class="swipen_one_r_company">
										<text>{{item.danwei}}</text>
									</view>
									<view class="swipen_one_r_decation">
										<text style="font-size: 28rpx;color: #333;font-weight: bold;">简介：</text>
										<text>{{item.jianjie}}</text>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item class='flex  shouye_fd1_0' v-for="item in auctionList" v-if="item.xuwei==1"
							@click="godetail(item.xuwei,'')">
							<image style="width: 100%;height: 100%;" :src="item.head" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view style="position: absolute"
						class="flex dot flex align-center justify-center shouye_swiperDotfd1_0">
						<template v-for="(item, index) in auctionList">
							<view :key="index" v-if="bannerIndexfd1_0 == index"
								class="flex dot selected flex align-center justify-center shouye_swiperDotSelectedfd1_0">
							</view>
							<view :key="index" v-else
								class="flex dot unselected flex align-center justify-center shouye_swiperDotUnselectedfd1_0">
							</view>
						</template>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center shouye_flex_2">
				<view class='flex flex-wrap align-center self-center justify-center shouye_fd2_0'>
					<text class='self-center shouye_fd2_0_c0'>简单</text>
				</view>
				<view class='flex flex-wrap align-center self-center justify-center shouye_fd2_0'>
					<text class='self-center shouye_fd2_0_c0'>高效</text>
				</view>
				<view class='flex flex-wrap align-center self-center justify-center shouye_fd2_0'>
					<text class='self-center shouye_fd2_0_c0'>经济</text>
				</view>
				<view class='flex flex-wrap align-center self-center justify-center shouye_fd2_0'>
					<text class='self-center shouye_fd2_0_c0'>诚信</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center shouye_flex_3">
				<swiper :indicator-dots="false" :circular="true" :vertical="true" :autoplay="true" :interval="3000" :duration="2000"
					style="width: 100%;height:684rpx;">
					<swiper-item class="custom-height" v-for='(item,key0) in newcaselist'>
						<view class='flex flex-wrap align-center shouye_fd3_0' v-for="list in item" @click.stop="lookmore">
							<view class='flex flex-wrap align-center shouye_fd3_0_c0'>
								<text>{{list.suozaidiqu_city}}</text>
							</view>
							<view class='align-center shouye_fd3_0_c1'>
								<text>{{list.servicecate_mingcheng}}</text>
							</view>
							<view class='flex flex-wrap align-center shouye_fd3_0_c2'>
								<view
									class='flex flex-wrap align-baseline self-center justify-between shouye_fd3_0_c2_c0'
									v-if=" list.fuwujiageleixing=='1'">
									<text style="padding-left: 4rpx;">一口价</text>
								</view>
								<view
									class='flex flex-wrap align-baseline self-center justify-between shouye_fd3_0_c2_c1'
									v-if=" list.fuwujiageleixing=='2'">
									<text style="padding-left: 4rpx;">全风险</text>
								</view>
								<view
									class='flex flex-wrap align-baseline self-center justify-between shouye_fd3_0_c2_c2'
									v-if=" list.fuwujiageleixing=='3'">
									<text style="padding-left: 4rpx;">半风险</text>
								</view>
							</view>
							<view class='flex shouye_fd3_0_c3'>
								<text style="padding-left: 50rpx;">{{list.price}}</text>
								<text>元</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="flex flex-wrap align-center justify-around benben-flex-layout shouye_flex_5" v-if="web_site_status==1">
				<view class='flex flex-wrap align-center justify-center shouye_fd5_0' @click="fabuclick">
					<text>发&nbsp;&nbsp;布</text>
				</view>
				<view class='flex flex-wrap align-center justify-center shouye_fd5_1' @click="lookmore">查&nbsp;&nbsp;看</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!--选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker6" :provincetext.sync="povicename" :citytext.sync="cityname"
				:visible.sync="pickerDiy1709006063505" mode='region' :mask-show='true' :picker-height='88'
				:hide-area='true' @change="addresschange">
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between shouye_picker6_0'>
						<text @tap="$refs.benbenWritePickerCodepicker6.cancel()">取消</text>
						<text>选择所在地区</text>
						<text class='shouye_picker6_0_c2'
							@tap="$refs.benbenWritePickerCodepicker6.pickerConfirm()">确认</text>
					</view>
				</template>
			</benben-picker>
			<!--选择器结束 -->
		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	export default {
		components: {
			maoScroll
		},
		data() {
			return {
				"pickerDiy1709006063505": false,
				"bannerIndexfd1_0": 0,
				"suozaidiqu_province": "",
				"suozaidiqu_city": "",
				"page": "1",
				"list_rows": "30",
				"get_cases_list": [],
				newcaselist: [],
				auctionList: [], //首页轮播竞拍列表
				data: [],
				count: 30,
				showNum: 5,
				lineHeight: 76,
				animationScroll: 76,
				animation: 2000,
				
				longitude:"",
				latitude:"",
				povicename: "", //
				cityname: "", //城市名称
				web_site_status:"0",//上架信息
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {

		},
		// 1.发送给朋友
		onShareAppMessage(res) {
			return {
				title:"案网",
				path:"/pages/tabBar/shouye/shouye",
				imageUrl:"https://paiaifalv.oss-cn-beijing.aliyuncs.com/m5328/271172d67b026f9ce9d053a770ffc2f0.png",
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title:"案网",
				path:"/pages/tabBar/shouye/shouye",
				imageUrl:"https://paiaifalv.oss-cn-beijing.aliyuncs.com/m5328/271172d67b026f9ce9d053a770ffc2f0.png",
			}
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getlocation();
			this.get_cases_listFunc();//获取首页案件列表
			this.get_home_auctionList(); //首页轮播竞拍列表
			this.get_config();//获取系统配置
			
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取配置信息
			get_config(){
				this.$api.post(global.apiUrls.get_config, {
				}).then(res => {
					if (res.data.code == 1) {
						this.web_site_status = res.data.data.web_site_status;
					}
				})
			},
			
			//获取定位
			getlocation() {
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						// _this.longitude = "106.45000";
						// _this.latitude = "29.56667";
						// _this.longitude = "121.469170";
						// _this.latitude = "31.224361";
						_this.$api.post(global.apiUrls.post66286c841221c, {
							lat:_this.latitude,
							lng:_this.longitude,
						}).then(res=>{
							console.log(res)
							if(res.data.code==1){
								_this.cityname = res.data.data.city;
								_this.povicename = res.data.data.province;
								uni.setStorageSync("povicename",_this.povicename);
								uni.setStorageSync("cityname",_this.cityname);
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	success: function(res) {
				// 		console.log(res)
				// 		_this.longitude = res.longitude;
				// 		_this.latitude = res.latitude;
				// 		uni.request({
				// 			url: "https://restapi.amap.com/v3/geocode/regeo",
				// 			method: 'get',
				// 			header: {
				// 				'content-type': 'application/x-www-form-urlencoded'
				// 			},
				// 			data: {
				// 				key: "14b0863c0adfd774918dd23c776297c0",
				// 				location: _this.longitude + "," + _this.latitude
				// 			},
				// 			success: function(res) {
				// 				console.log(res);
				// 				if (res.data.status == 1) {
				// 					_this.cityname = res.data.regeocode.addressComponent.city;
				// 					_this.povicename = res.data.regeocode.addressComponent.province;
				// 					uni.setStorageSync("povicename",res.data.regeocode.addressComponent.province);
				// 					uni.setStorageSync("cityname",res.data.regeocode.addressComponent.city);
				// 					_this.get_home_auctionList();
				// 				}
				// 			}
				// 		});
				// 	},
				// 	fail(err) {
				// 		console.log(err)
				// 	}
				// });
			},
			
			//获取首页案件列表
			async get_cases_listFunc() {
				//请求方法
				//数据验证
				let _this = this;
				let dataget_cases_list = await this.$api.post(global.apiUrls.post65ba149821f26, {
					page: this.page,
					list_rows: this.list_rows,
				});
				if (dataget_cases_list.data.code != 1) {
					this.$message.info(dataget_cases_list.data.msg);
					return
				}
				let infoget_cases_list = dataget_cases_list.data.data;
				this.get_cases_list = infoget_cases_list.data;
				for (var i = 0; i < this.get_cases_list.length; i += 9) {
					_this.newcaselist.push(_this.get_cases_list.slice(i, i + 9))
				}
			},

			//获取首页轮播竞拍列表
			get_home_auctionList() {
				this.$api.post(global.apiUrls.get_home_auctionList, {
					province:this.povicename,
					city:this.cityname,
				}).then(res => {
					if (res.data.code == 1) {
						this.auctionList = res.data.data;
					}
				})
			},

			//地区切换
			addresschange(e) {
				this.cityname = e.obj.city.label;
				this.povicename = e.obj.province.label;
				uni.setStorageSync("povicename", this.povicename);
				uni.setStorageSync("cityname", this.cityname);
				this.get_home_auctionList();
			},

			//跳转详情
			godetail(xuwei, aid) {
				if (xuwei == 0) {
					uni.navigateTo({
						url: "/pages/shouye/lvshidetail/lvshidetail?aid=" + aid,
					})
				} else {
					uni.navigateTo({
						url: "/pages/shouye/zhanshijiaocheng/zhanshijiaocheng",
					})
				}
			},

			//跳转案件详情
			anjiandetail(aid) {
				uni.navigateTo({
					url: "/pages/shouye/anjiandetail/anjiandetail?anjianid=" + aid,
				})
			},
			
			//跳转查看
			lookmore(){
				uni.navigateTo({
					url:"/pages/shouye/anjianliebiao/anjianliebiao?cityname="+this.cityname,
				})
			},

			//跳转发布
			fabuclick() {
				if (!uni.getStorageSync("token")) {
					uni.navigateTo({
						url: "/pages/tabBar/denglu/denglu"
					})
				} else {
					uni.navigateTo({
						url: "/pages/shouye/fabu/fabu"
					})
				}
			},

			//跳转客服
			gokefu() {
				uni.navigateTo({
					url: "/pages/xtsz/kefu/kefu"
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(239, 239, 239, 1);
		background-size: 100% auto;
	}

	.custom-height {
		width: 100%;
		height: 380rpx;
	}

	.shouye_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 150rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.shouye_fd0_1_c1 {
		margin: 0rpx 0rpx 0rpx 16rpx;
		color: var(--benbenFontColor2);
		font-size: 28rpx;
		line-height: 28rpx;
	}

	.shouye_fd0_1_c0 {
		width: 24rpx;
		height: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.shouye_fd0_1 {
		background: rgba(246, 247, 249, 1);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 0rpx 32rpx 0rpx 32rpx;
		height: 64rpx;
	}

	.shouye_fd0_0_c2 {
		color: #1A1A1A;
		font-size: 36rpx;
		font-weight: 700;
		line-height: 45rpx;
		position: relative;
		left: -200rpx;
	}

	.shouye_fd0_0_c1_c1 {
		font-size: 36rpx;
		font-weight: 400;
		color: var(--benbenFontColor3);
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.shouye_fd0_0_c1_c0 {
		position: absolute;
		top: -6rpx;
		right: 0rpx;
	}

	.shouye_fd0_0_c1 {
		margin: 0rpx 0rpx 0rpx 0rpx;

	}

	.shouye_fd0_0_c0_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #1A1A1A;
		padding-left: 8rpx;
	}

	.shouye_fd0_0_c0_c0 {
		width: 30rpx;
		height: 36rpx;
		margin-left: 32rpx;
	}

	.qiehuan {
		width: 32rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	.shouye_fd0_0_c0 {
		width: 400rpx;
	}

	.kefu {
		width: 32rpx;
		height: 34rpx;
		margin-left: 50rpx;
	}

	.shouye_fd0_0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.shouye_flex_1 {
		height: 380rpx;
	}

	.shouye_numberfd1_0_c0 {
		background: #525050;
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		width: 80rpx;
		height: 40rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		font-weight: 400;
	}

	.shouye_fd1_0_c1_c0 {
		width: 100%;
		height: 380rpx;
	}

	.swipen_one {
		width: 100%;
		height: 100%;
	}

	.swipen_one_l {
		width: 290rpx;
		height: 100%;
		float: left;
	}

	.swipen_one_l image {
		width: 100%;
		height: 100%;
	}

	.swipen_one_r {
		width: 460rpx;
		height: 100%;
		float: right;
	}

	.swipen_one_r_one {
		width: 100%;
		text-align: center;
		margin-top: 50rpx;
	}

	.swipen_one_r_one_name {
		font-weight: 600;
		font-size: 52rpx;
		color: #1A1A1A;
	}

	.swipen_one_r_one_bq {
		font-weight: 400;
		font-size: 24rpx;
		color: #1A1A1A;
		padding-left: 20rpx;
	}

	.swipen_one_r_number {
		font-weight: 400;
		font-size: 24rpx;
		color: #1A1A1A;
		text-align: center;
	}

	.swipen_one_r_company {
		font-weight: 400;
		font-size: 24rpx;
		color: #1A1A1A;
		text-align: center;
		margin-top: 14rpx;
	}

	.swipen_one_r_decation {
		font-weight: 400;
		font-size: 28rpx;
		color: #1A1A1A;
		padding: 20rpx;
		height: 130rpx;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
	}

	.shouye_fd1_0 {
		width: 750rpx;
		height: 380rpx;
		overflow: hidden;
	}

	.shouye_swiperDotUnselectedfd1_0 {
		border: 1px solid rgba(0, 0, 0, 0.3);
		background: rgba(0, 0, 0, 0.3);
		width: 12rpx;
		height: 12rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.shouye_swiperDotSelectedfd1_0 {
		border: 1px solid #FFFFFF;
		background: #FFFFFF;
		width: 32rpx;
		height: 12rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
	}

	::v-deep .shouye_swiperDotfd1_0 {
		position: absolute;
		bottom: 20rpx;
		left: 0rpx;
		right: -400rpx;
	}

	.shouye_flex_2 {
		background: #F2CD53;
		width: 100%;
		height: 66rpx;
		background-size: 100% auto;
	}

	.shouye_fd2_0_c0 {
		font-size: 36rpx;
		color: #3F5B39;
		font-weight: 400;
	}

	.shouye_fd2_0 {
		width: 25%;
		height: 100%;
		line-height: 28rpx;
		color: #3F5B39;
		font-size: 18rpx;
		font-weight: 400;
	}

	.shouye_flex_3 {
		width: 100%;
		height: 380rpx;
	}

	.shouye_fd3_0_c3 {
		width: 25%;
		height: 100%;
		text-align: right !important;
		padding: 0rpx 0rpx 0rpx 0rpx;
		border-radius: 16rpx;
	}

	.shouye_fd3_0_c2_c2 {
		background: rgba(233, 180, 4, 1);
		width: 82rpx;
		height: 36rpx;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 36rpx;
		font-style: normal;
		text-align: center;
	}

	.shouye_fd3_0_c2_c1 {
		background: rgba(253, 1, 0, 1);
		width: 82rpx;
		height: 36rpx;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 36rpx;
	}

	.shouye_fd3_0_c2_c0 {
		background: #01BF85;
		width: 82rpx;
		height: 36rpx;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 36rpx;
	}

	.shouye_fd3_0_c2 {
		width: 20%;
		height: 100%;
		margin: 0rpx 0rpx 0rpx 36rpx;
	}

	.shouye_fd3_0_c1 {
		height: 100%;
		width: 20%;
		margin: 0rpx 0rpx 0rpx 38rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shouye_fd3_0_c0 {
		margin: 0rpx 0rpx 0rpx 38rpx;
		height: 100%;
		width: 20%;
	}

	.shouye_fd3_0 {
		background: rgba(255, 255, 255, 1);
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		color: #000000;
		font-size: 28rpx;
		font-weight: 400;
		// margin: 0rpx 0rpx 4rpx 0rpx;
	}

	.shouye_flex_4 {
		width: 100%;
		height: 100rpx;
	}

	.shouye_flex_5 {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom:32rpx;
	}

	.shouye_fd5_1 {
		background: linear-gradient(180deg, #2A8BD9 0%, #116CB5 93%, #15466D 100%);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		width: 340rpx;
		height: 100rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 0rpx;
		font-weight: 400;
		text-align: center;
	}

	.shouye_fd5_0 {
		background: linear-gradient(180deg, #26BF01 0%, #1B9A00 90%, #3F5B39 100%);
		width: 340rpx;
		height: 100rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 0rpx;
		font-weight: 400;
		text-align: center;
	}

	.shouye_picker6_0_c2 {
		color: rgba(253, 1, 0, 1);
	}

	.shouye_picker6_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}
</style>